<template>
<div class="list" ref="wrapper">
<div>
<div class="area">
<div class="title border-topbottom">当前城市</div>
<div class="button-list">
<div class="button-wrapper">
<div class="button">{{this.city}}</div>
</div>
</div>
</div>
<div class="area">
<div class="title border-topbottom">热门城市</div>
<div class="button-list">
<div class="button-wrapper" v-for="item of hotCities" :key="item.id" @click="handleCityClick(item)">
<div class="button">{{item}}</div>
</div>
</div>
</div>
<div class="area" v-for="item of allCities" :key="item.id" :ref="item.title">
<div class="title border-topbottom">{{item.title}}</div>
<div class="item-list">
<div class="item" v-for="city of item.lists" :key="city.id" @click="handleCityClick(city)">{{city}}</div>
</div>
</div>
</div>
</div>
</template>

<script>

import Bscroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'CityList',
  props: ['allCities', 'hotCities', 'letter'],
  methods: {
    handleCityClick (city) {
      // this.$store.commit('changeCity', city)
      this.changeCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity'])// 简化代码 不用写成 this.$store.commit
  },
  computed: {
    ...mapState(['city'])
  },
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        console.log(element)
        this.scroll.scrollToElement(element)
      }
      console.log(this.letter)
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  }
}

</script>

<style lang="stylus" scoped>
@import '~@/assets/style/varibles.styl'
.border-topbottom
   &:before
    border-color : #ccc
   &:after
    border-color : #ccc
.list
  overflow :hidden
  position :absolute
  top: 5.9rem
  right :0
  left : 0
  bottom : 0
.list::-webkit-scrollbar
  display: none!important
  width: 0px
  height: 0px
 .title
   line-height : 2rem
   background : #eee
   padding-left : 1rem
   color : #666
   font-size : 1.2rem
 .button-list
   overflow : hidden
   padding : 1rem
   padding-right : 2rem
  .button-wrapper
   float : left
   .button
     width : 4.5rem
     margin : .2rem
     padding : .2rem
     text-align :center
     border: .1rem solid #ccc
 .item-list
  .item
   line-height : 2.5rem
   color : #666
   padding-left : 1rem
   border-bottom : 1px solid #ccc
</style>
